<template>
	<div>
		<header>
			<nav ref="nav" class="navbar navbar-fixed-top navbar-inverse">
				<div class="container">
					<div class="navbar-header" style="margin-left:0;">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"
						aria-expanded="false">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>

						<a href="#" class="navbar-brand" style="width:250px;float: none;">
							<img alt="Vue logo" style="height:44px;" src="../../../assets/oddlogo.png">
						</a>
					</div>

					<div class="collapse navbar-collapse" id="navbar-collapse">
						<!-- <div class="home">
							<img alt="Vue logo" src="../../../assets/oddlogo.png">
						</div> -->
						<!-- 去掉数字: -->
						<ul class="nav navbar-nav" id="navbar-nav">
							<li>
								<!-- <router-link :to="{name:'home'}">01 : Home</router-link> -->
								<!-- <router-link :to="{name:'home'}" v-text="'01 : '+$t('navbar.Home')"></router-link> -->
								<router-link :to="{name:'home'}" v-text="$t('navbar.Home')"></router-link>
							</li>
							<li>
								<!-- <router-link :to="{name:'blog'}" v-text="'02 : '+$t('navbar.Blogs')"></router-link> -->
								<router-link :to="{name:'blog'}" v-text="$t('navbar.Blogs')"></router-link>
							</li>
							<li>
								<!-- <router-link :to="{name:'log'}">02 : Blogs</router-link> -->
								<!-- <router-link :to="{name:'vlog'}" v-text="'03 : '+$t('navbar.Vlogs')"></router-link> -->
								<router-link :to="{name:'vlog'}" v-text="$t('navbar.Vlogs')"></router-link>
							</li>
							<!-- <li> -->
								<!-- <router-link :to="{name:'works'}">04 : Works</router-link> -->
								<!-- <router-link :to="{name:'works'}" v-text="'04 : '+$t('navbar.Works')"></router-link> -->
								<!-- <router-link :to="{name:'works'}" v-text="$t('navbar.Works')"></router-link> -->
								<!-- **************** -->
							<!-- </li> -->
							<li>
								<!-- <router-link :to="{name:'about'}">03 : About me</router-link> -->
								<!-- <router-link :to="{name:'about'}" v-text="'05 : '+$t('navbar.About')"></router-link> -->
								<router-link :to="{name:'about'}" v-text="$t('navbar.About')"></router-link>
							</li>
							<li>
								<!-- <router-link :to="{name:'contact'}">05 : Contact</router-link> -->
								<!-- <router-link :to="{name:'contact'}" v-text="'06 : '+$t('navbar.Contact')"></router-link> -->
								<router-link :to="{name:'contact'}" v-text="$t('navbar.Contact')"></router-link>
							</li>
							<li v-if="false">
								<a href="javascript:;">
									<div class="dropdown">
										<div id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
											Dropdown
											<span class="caret"></span>
										</div>
										<ul class="dropdown-menu" aria-labelledby="dropdownMenu">
											<li>
												<a href="#">中文</a>
											</li>
											<li>
												<a href="#">English</a>
											</li>
										</ul>
									</div>
								</a>
							</li>
						</ul>
						<!-- 文章导航 -->
						<!-- v-if="this.$route.name=='logcontent'" -->
						<ul v-if="false" class="nav navbar-nav navbar-right navbar-small visible-md visible-lg">
							<li v-for="(item,index) in currentArticles" :key="index">
								<a href="javascript:;" v-html="'00'+(index+1)" :data-index="index" v-active @click="changePage(item,index)"></a>
							</li>
						</ul>
						<!-- 文章导航 -->
					</div>
				</div>
			</nav>
		</header>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				currentArticles: [],
			}
		},
		directives: {
			'active': {
				inserted(el, binding, node) {
					let index = el.getAttribute('data-index'),
						contentIndex = node.context.$route.params.id,
						isActive = index == contentIndex;
					if (isActive) el.classList.add('active');
				},
				update(el, binding, node) {
					let index = el.getAttribute('data-index'),
						contentIndex = node.context.$route.params.id
					$("ul.navbar-right li a").eq(index).removeClass('active')
					$("ul.navbar-right li a").eq(contentIndex).addClass('active')
				},
			}
		},
		mounted() {
			if (this.$route.name == 'home') {
				this.$refs.nav.classList.add('navbar-inverse')
				this.$refs.nav.classList.remove('navbar-default')
			} else {
				this.$refs.nav.classList.add('navbar-default')
				this.$refs.nav.classList.remove('navbar-inverse')
			}
			this.currentArticles = JSON.parse(sessionStorage.getItem('allArticles'))
		},
		methods: {
			changePage(item, index) {
				if (index == this.$route.params.id) return false;
				var _this = this,
					obj = JSON.parse(JSON.stringify(_this.$router.currentRoute.query)) // 这里我们需要的应该是值，因此必须转为深拷贝
				Object.assign(obj, {
					id: index,
					contentid: item._id
				})
				_this.$router.push({
					params: obj
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	#navbar-collapse {
		ul {
			li {

				a:hover,
				a:focus {
					color: #333;
					text-decoration: none;
				}

				a:focus {
					outline: 5px auto -webkit-focus-ring-color;
					outline-offset: -2px;
				}
			}
		}
	}

	.minimal {
		#navbar-collapse {
			ul {
				li {

					a:hover,
					a:focus {
						color: #fff;
						text-decoration: none;
					}

					a:focus {
						outline: 5px auto -webkit-focus-ring-color;
						outline-offset: -2px;
					}
				}
			}
		}
	}
	// 去掉border,字体改大,变为白色
	.navbar-inverse .navbar-nav > li > a {
	    border-right: 0px ;
		font-size: 16px;
		color: #fff;
		line-height: 21px;
		padding: 15px 20px;
	}
	
	// #navbar-nav > li > a {
	//     border-right: 0px ;
	// 	font-size: 16px;
	// 	color: #fff;
	// 	line-height: 21px;
	// 	padding: 15px 20px;
	// }
	
	.navbar-default .navbar-nav > li > a {
		border-right: 0px ;
		font-size: 16px;
		line-height: 21px;
		padding: 15px 20px;
	}
</style>

<style type="text/css">
	@media (min-width: 768px){
		#navbar-nav {
			margin-left: 76px;
		}
	}
</style>